// pages/order/order.js
import {get,post} from '../../utils/api'
import Dialog from '@vant/weapp/dialog/dialog'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    activeKey: 0,
    // 食物列表
    foodList:[
      { 
        id: 1, 
        // 菜系
        cuisine: '川菜', 
        cuisineId: 'c1', 
        foods: [
        // 菜名
        {name: '辣子鸡', 
        // 
        flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 11}
      ]},
      { id: 2, cuisine: '粤菜', cuisineId: 'c2', foods: [
        {name: '皮蛋瘦肉粥', flavorName: '撒子', speName: 'OK', price: 100, type: 2, id: 21}
      ]},{ id: 3, cuisine: '湘菜', cuisineId: 'c3', foods: [
        {name: '桂林米粉', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 31}
      ]},{ id: 4, cuisine: '火锅', cuisineId: 'c4', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 2, id: 41}
      ]},{ id: 5, cuisine: '越南菜', cuisineId: 'c5', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 51}
      ]},{ id: 6, cuisine: '泰国菜', cuisineId: 'c6', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 61}
      ]},{ id: 7, cuisine: '川菜', cuisineId: 'c7', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 71}
      ]},{ id: 8, cuisine: '川菜', cuisineId: 'c8', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 81}
      ]},{ id: 9, cuisine: '川菜', cuisineId: 'c9', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 91}
      ]},{ id: 10, cuisine: '川菜', cuisineId: 'c10', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 101}
      ]},{ id: 11, cuisine: '川菜', cuisineId: 'c11', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 111}
      ]},{ id: 12, cuisine: '川菜', cuisineId: 'c12', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 121}
      ]},{ id: 13, cuisine: '川菜', cuisineId: 'c13', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 131}
      ]},{ id: 14, cuisine: '川菜', cuisineId: 'c14', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 141}
      ]},{ id: 15, cuisine: '川菜', cuisineId: 'c15', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 151}
      ]},{ id: 16, cuisine: '川菜', cuisineId: 'c16', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 161}
      ]},{ id: 17, cuisine: '川菜', cuisineId: 'c17', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 171}
      ]},{ id: 18, cuisine: '川菜', cuisineId: 'c18', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 181}
      ]},{ id: 19, cuisine: '川菜', cuisineId: 'c19', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 191}
      ]},{ id: 20, cuisine: '川菜', cuisineId: 'c20', foods: [
        {name: '川菜', flavorName: '撒子', speName: 'OK', price: 100, type: 1, id: 201}
      ]}
    ],

    // 食物名称
    cuisineId:'',
    // 高度
      wh:0,
      // 搜索框状态
      inputShowed: true,
      show: false,
      foodName: '麻婆豆腐',
      value: '',
      price: 50,
      total: 0,
      star:'',
      // 规格选择
      flavorActive: 0,
      speActive: 2,
      flavor:[],
      spe:[],
      selected:[],
      tips:'',
      num:0,
      isShow:false
  
     
  },
  // 侧边导航切换事件
onChangeitem(e){
//  console.log(e)
 // 解构 对象
const {target:{dataset:{name}}}=e
 
 this.setData({
  cuisineId:name
 })
console.log(this.data.cuisineId)
//  // 查找是否对应菜系的菜名
//    const list=this.data.foodList.find((item)=>item.cuisine === name)
//  console.log(list)
  
},
// 返回按钮事件
 backHandle(){
     wx.switchTab({
        url: '/pages/home/home',
     })
      
     
 },

// 封装动态获取屏幕高度的方法
getHight(){
  // wx.getSystemInfoSync同步获取系统信息

  const info = wx.getSystemInfoSync();
  // console.log(info);
   this.setData({
     wh:info.windowHeight-100
   })
  //  console.log(this.data.wh)
},
// 加号按钮点击事件
btnHandle(e){
  
     const {id}=e.currentTarget.dataset
     const {foodList}=this.data
  foodList.find(item=>{
    
   const  food = item.foods.find(i=>i.id===id)
    console.log(food)
    this.setData({
      foodName:food.name
    })
    return food;
  })

    this.setData({ isShow: true });
    this.getFoodStyle()

   
},
// 输入重量按钮点击触发
iptWeight(e){
  const {id}=e.currentTarget.dataset
  const {foodList}=this.data
foodList.find(item=>{
 
const  food = item.foods.find(i=>i.id===id)
 console.log(food)
 this.setData({
   foodName:food.name
 })
 return food;
})
    this.setData({ show: true });
  
},
// 点击 规格按钮时触发
iptStardand(){
console.log(3)
},
 // 监听商品数量变化的事件
 countChanged(e){
   
 
 },
 
   // 判断购物车是否为空
   isEmpty(){
    if(this.cart.length <=0 ){
        return true
    }
    return false

},
    // 总价格，单位是分
         // 总价格，单位是 分
         amounts() {
          let total = 0 // 单位是 元
          this.cart.forEach(x => {
          if (x.isCheck) {
              total += x.price * x.count
          }
          })
     this.amount=total
          return total * 100
       },
  // 菜品规格选择
  // 请求数据
  async getFoodStyle() {
    const {data:res}=await post('http://192.168.35.53:82/food/foodSpeAndFlavor',{name:this.data.foodName})
    console.log(res);
    this.setData({
      flavor:res.data.flavor,
      spe:res.data.spe,
      star:res.data.num
    })
    
  },

  // 选择口味和规格
  flavorOnChange(e) {
    this.setData({ flavorActive: e.detail });
    this.setData({tips:'请选择规格'})
  },
  // 选择数量 
  onNumChange(e) {
    this.setData({num:e.detail})
  },
  async speOnChange(e) {
    this.setData({ speActive: e.detail });
    const {data:res}=await post('http://192.168.35.53:82/food/foodDetail',{
      name:this.data.foodName,speId:this.data.speActive+1,flavorId:6
    })
    console.log(res);
    this.setData({tips:res.data.name+' '+res.data.speName+' '+res.data.flavorName})
  },
  // 选择完以后请求订餐信息
  onOrderConfig() {
    this.setData({isShow: false})
  },
  // 取消选择
  onOrderCancel() {
   this.setData({isShow:false,tips:''}) 
  },
  // 渲染页面
  async getOrderList() {
    const {data:{data:res}} =await get('http://192.168.35.53:82/food/foods')
    console.log(res)
     this.setData({
      foodList:res
     })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getOrderList()
    this.getHight()
    // this.scrollChange()

    //动态获取页面元素滚动距离
    this.data.foodList.forEach((i,idx)=>{
      wx.createSelectorQuery().select('#foods' + idx).boundingClientRect(rect => {
        // console.log(rect.top,rect.height);
        i.offsetTop = rect.top;
        i.height = rect.height;
      }).exec()
    })
    
  },
  // 提交按钮事件
  onSubmit(){
    Dialog.confirm({
      title: '是否确认下单',
      customStyle: 'border-radius:0;border:2px solid #fc0;',
      overlayStyle: 'background-color:#999999'
    })
      .then(() => {
        wx.navigateTo({
          url: '/pages/Submit/submit',
        })
      })
      .catch(() => {
        // on cancel
      });

  },
// 页面滚动事件
  scrollChange(e){
    // console.log(e)
    const {detail:{scrollTop}}=e
    this.data.foodList.forEach((i,idx)=>{
      if(scrollTop >= (i.offsetTop- 80) && scrollTop <= (i.offsetTop +i.height)){
        // console.log(scrollTop,i.offsetTop-80)
        this.setData({
          activeKey: idx
        }) 
      }
    })

    
  },

 
 

  onClickHide() {
    this.setData({ show: false });
  },
  //输入框内容改变事件
  onChange(e) {
    console.log(e.detail);
    return this.checkInputText(e.detail);
  },  //检查输入文本，限制只能为数字并且数字最多带2位小数
  checkInputText: function (text) {
    var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g; if (reg.test(text)) { //正则匹配通过，提取有效文本
      text = text.replace(reg, '$2$3$4');
    } else { //正则匹配不通过，直接清空
      text = '';
    }
    const {price}=this.data
    this.setData({ 
      value: text,
     })//返回符合要求的文本（为数字且最多有带2位小数）
     this.setData({
      total:(this.data.value*price).toFixed(2)
     })
  },
  // 点击取消
  onCancel() {
    this.setData({ 
      show: false,
      total:0,
      value:''
    })
  },
  // 点击确认
  onConfig() {
    this.setData({ show: false })
  },

   // 在OnPageScroll()方法里面使用，可以实时获取该元素的位置信息，特别是高度
  onPageScroll: function (e) {
    
    
  },
  
 
 

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})